import { SearchBar, Toast } from 'antd-mobile';
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import './Search.scss'
import { getSearchList } from '../../data/api'

class Search extends Component {
  constructor() {
    super()
    this.refScroll = React.createRef()
    this.pageNo = 1;
    this.loading = false;
    this.totalPage = 0;
    this.state = {
      SearchList: [],
      inputVal: '',
      isend: false
    }
  }

  componentDidMount() {
    this.refScroll.current.addEventListener('scroll', this.handleScroll)
    let searstr = document.getElementsByClassName('am-search-synthetic-ph-placeholder')
    searstr[0].innerHTML = '请输入书名或作者名'
  }
  handleClickSeek = () => {
    if(this.props.disabled){
      this.props.history.push('seek')
    }
    
  }
  handleCancel = () => {
    this.props.history.go(-1)
  }
  timeId = null
  debounce = (fn, time) => {
    if (this.timeId) {
      clearTimeout(this.timeId)
      this.timeId = null;
    }
    this.timeId = setTimeout(fn, time)
  }
  handleChange = (value) => {
    if (value) {
      this.debounce(async () => {
        let res = await getSearchList({
          pageNo: 1,
          pageSize: 10,
          objectType: 2,
          word: value
        })
        this.totalPage = res.data.totalPage
        this.setState({
          inputVal: value,
          SearchList: res.data.bookList
        })
      }, 200)
    } else {
      this.setState({
        inputVal: value,
      })
    }
  }
  handleClick = (id) => {
    this.props.history.push('/detailed/' + id)
  }
  handleSubmit = () => {
    this.setState({
      isend: true,
    })
  }

  handleScroll =async () => {
    let parentElement = this.refScroll.current;
    let clientHeight = parentElement.clientHeight;//可视区高632
    let scrollHeight = parentElement.scrollHeight;//1154
    let scrollTop = parentElement.scrollTop;//522
    if (scrollHeight - clientHeight - scrollTop < 1 && !this.loading) {
      if (this.pageNo >= this.totalPage) {
        Toast.info('到底了', 1);
        return
      }
      this.pageNo++
      this.loading = true
      let res =await  getSearchList({
        pageNo: this.pageNo,
        pageSize: 10,
        objectType: 2,
        word: this.state.inputVal
      })
      this.setState({
        SearchList: [...this.state.SearchList, ...res.data.bookList]
      })
      this.loading = false
    }
  }

  componentDidWillUnmount() {
    this.refScroll.current.removeEventListener('scroll', this.handleScroll)
    clearTimeout(this.debounce);
  }


  render() {
    return (
      <div className='searchbox'  onClick={this.handleClickSeek}>
        <SearchBar onSubmit={this.handleSubmit} onChange={this.handleChange} onCancel={this.handleCancel} disabled={this.props.disabled} showCancelButton={this.props.right} placeholder="Search" maxLength={10} />
        <div className={(this.state.inputVal && !this.state.isend) ? 'items' : 'hidden'}>
          {!this.state.isend && this.state.SearchList.map((v) => {
            return <p key={v.id} onClick={this.handleClick.bind(this, v.id)}> {v.name} </p>
          })}
        </div>
        <div ref={this.refScroll} className={this.state.isend ? 'imgitems' : 'hidden'}>
          {this.state.SearchList && this.state.SearchList.map((v) => {
            return <div key={v.id} className='item'>
              <img src={v.icon} alt="" onClick={this.handleClick.bind(this, v.id)} />
              <div className='item_right'>
                <h3> {v.name} </h3>
                <p> {v.authorName} </p>
                <span> {v.introduce} </span>
              </div>
            </div>
          })}
        </div>
      </div>
    )
  }
}
export default withRouter(Search);
